<template>
  <ph-view>
    <ph-tab>
      <ph-tab-panel title="基本demo">
        <ph-button
          type="primary"
          @click="onShiftFormStyle"
          style="margin-bottom: 1rem"
          >切换风格</ph-button
        >
        <ph-form :type="formStyle">
          <ph-validator>
            <ph-form-group>
              <ph-form-input
                :block="false"
                :value="account"
                label="账户名"
                placeholder="required"
                :validators="['required']"
                @ph-change="onAccountChange"
              />
              <ph-form-input
                :block="false"
                :value="email"
                label="邮箱"
                placeholder="email"
                :validators="['email']"
              />
              <ph-form-input
                :block="false"
                placeholder="测试警用"
                label="禁用"
                :disabled="true"
              />
              <ph-form-number-range
                @ph-change="onSalaryChange"
                label="期望月薪(k)"
                placeholderStart="下限"
                placeholderEnd="上限"
                :validators="['required']"
                :block="false"
                :start="salary.start"
                :end="salary.end"
                :max="salary.max"
                :min="salary.min"
              />
            </ph-form-group>
            <ph-form-datetime-cascade
              @ph-change="onDutyChange"
              label="任职日期"
              type="date"
              :validators="['required']"
              :start="duty.start"
              :end="duty.end"
              :max="duty.max"
              :min="duty.min"
              placeholderStart="开始日期"
              placeholderEnd="结束日期"
            />
            <ph-form-datetime-range
              @ph-change="onDutyChange"
              label="任职日期"
              type="date"
              :start="duty.start"
              :end="duty.end"
              :max="duty.max"
              :min="duty.min"
              placeholderStart="开始日期"
              placeholderEnd="结束日期"
            />
            <ph-form-datetime-cascade
              @ph-change="onDutyChange"
              label="读研年月"
              type="month"
              :start="month.start"
              :end="month.end"
              :max="month.max"
              :min="month.min"
              placeholderStart="开始年月"
              placeholderEnd="结束年月"
            />
            <ph-form-datetime-range
              @ph-change="onDutyChange"
              label="读研年月"
              type="month"
              :start="month.start"
              :end="month.end"
              :max="month.max"
              :min="month.min"
              placeholderStart="开始年月"
              placeholderEnd="结束年月"
            />
            <ph-form-datetime-cascade
              @ph-change="onDutyChange"
              label="大学年份"
              type="year"
              :start="year.start"
              :end="year.end"
              :max="year.max"
              :min="year.min"
              placeholderStart="开始年份"
              placeholderEnd="结束年份"
            />
            <ph-form-datetime-range
              @ph-change="onDutyChange"
              label="大学年份"
              type="year"
              :start="year.start"
              :end="year.end"
              :max="year.max"
              :min="year.min"
              placeholderStart="开始年份"
              placeholderEnd="结束年份"
            />
            <ph-form-datetime-cascade
              @ph-change="onDutyChange"
              label="工作时间"
              type="time"
              :start="time.start"
              :end="time.end"
              :max="time.max"
              :min="time.min"
              placeholderStart="上班时间"
              placeholderEnd="下班时间"
            />
            <ph-form-datetime-range
              @ph-change="onDutyChange"
              label="工作时间"
              type="time"
              :start="time.start"
              :end="time.end"
              :max="time.max"
              :min="time.min"
              placeholderStart="上班时间"
              placeholderEnd="下班时间"
            />
            <ph-form-input
              :value="profile"
              label="个人主页"
              :validators="['url']"
            />
            <ph-form-radio
              label="性别"
              :value="gender"
              @ph-change="onGenderChange"
            >
              <ph-radio-item value="0">男</ph-radio-item>
              <ph-radio-item value="1">女</ph-radio-item>
            </ph-form-radio>
            <ph-form-select
              label="幸运数字"
              :value="num"
              @ph-change="onNumChange"
              :multiple="true"
              :validators="['required']"
            >
              <ph-option :value="opt" v-for="opt in nums" :key="opt">{{
                opt
              }}</ph-option>
            </ph-form-select>
            <ph-form-switch
              label="婚否"
              :value="married"
              @ph-change="onMarriageChange"
            />
            <ph-form-color
              label="喜欢的颜色"
              :value="color"
              @ph-change="onColorChange"
              :disabled="false"
              :validators="['color']"
            />
            <ph-form-color
              label="禁止的颜色"
              :value="color"
              @ph-change="onColorChange"
              :disabled="true"
              :validators="['color']"
            />
            <ph-form-datetime
              type="date"
              label="生日"
              :value="birth"
              @ph-change="onBirthChange"
              :validators="['required']"
            />
            <ph-form-datetime
              type="date"
              label="死日"
              :value="birth"
              @ph-change="onBirthChange"
              :disabled="true"
            />
            <ph-form-select
              label="大学"
              :value="uni"
              @ph-change="onUniChange"
              align="center"
              :validators="['required']"
            >
              <ph-option
                :value="opt.value"
                v-for="opt in unis"
                :key="opt.value"
                >{{ opt.text }}</ph-option
              >
            </ph-form-select>
            <ph-form-select
              label="职业"
              :value="pro"
              @ph-change="onProChange"
              :multiple="true"
              :disabled="true"
            >
              <ph-option
                :value="opt.value"
                v-for="opt in pros"
                :key="opt.value"
                >{{ opt.text }}</ph-option
              >
            </ph-form-select>
            <ph-form-checkbox
              label="读过的小学"
              :value="sx"
              @ph-change="onSxChange"
              :validators="['required']"
            >
              <ph-checkbox-item
                v-for="item in sxs"
                :value="item.value"
                :key="item.value"
                >{{ item.text }}</ph-checkbox-item
              >
            </ph-form-checkbox>
            <ph-form-checkbox
              label="禁止全部选项"
              :value="sx"
              @ph-change="onSxChange"
              :disabled="true"
            >
              <ph-checkbox-item
                v-for="item in sxs"
                :value="item.value"
                :key="item.value"
                >{{ item.text }}</ph-checkbox-item
              >
            </ph-form-checkbox>
            <ph-form-checkbox
              label="禁止某一个"
              :value="sx"
              @ph-change="onSxChange"
            >
              <ph-checkbox-item
                :disabled="item.value == 2"
                v-for="item in sxs"
                :value="item.value"
                :key="item.value"
                >{{ item.text }}</ph-checkbox-item
              >
            </ph-form-checkbox>
            <ph-form-textarea
              label="个人介绍"
              placeholder="那天夕阳下的蹦跑"
              :validators="['required']"
            />
            <ph-button-group :container="true" dir="col">
              <ph-form-submit
                :block="true"
                type="primary"
                @submit="onSubmit"
                @valid-failed="onValidFailed"
                >提交</ph-form-submit
              >
              <ph-button :block="true" type="success">登陆</ph-button>
            </ph-button-group>
          </ph-validator>
        </ph-form>
      </ph-tab-panel>
      <ph-tab-panel title="template/style">
        <ph-pretty>{{ template }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="javascript">
        <ph-pretty>{{ script }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ baseUsage }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";
import {
  PhView,
  PhForm,
  PhFormNumberRange,
  PhFormDatetimeCascade,
  PhFormDatetimeRange,
  PhFormDatetime,
  PhFormSubmit,
  PhValidator,
  PhFormGroup,
  PhFormTextarea,
  PhFormInput,
  PhFormSelect,
  PhFormSwitch,
  PhFormColor,
  PhFormCheckbox,
  PhFormRadio,
  PhOption,
  PhCheckboxItem,
  PhRadioItem,
  PhButton,
  PhButtonGroup,
  PhTabPanel,
  PhTab,
} from "@/index";
import * as Data from "../data/form";
export default defineComponent({
  components: {
    PhView,
    PhForm,
    PhFormNumberRange,
    PhFormDatetimeCascade,
    PhFormDatetimeRange,
    PhFormDatetime,
    PhFormSubmit,
    PhValidator,
    PhFormGroup,
    PhFormTextarea,
    PhFormInput,
    PhFormSelect,
    PhFormSwitch,
    PhFormColor,
    PhFormCheckbox,
    PhFormRadio,
    PhOption,
    PhCheckboxItem,
    PhRadioItem,
    PhButton,
    PhButtonGroup,
    PhTabPanel,
    PhTab,
  },
  setup() {
    const formdata = reactive<Record<string, any>>({
      account: "",
      gender: 0,
      salary: {
        //   start:0,
        //   end:0,
        min: 9,
        //   max:100
      },
      duty: {
        min: "2018-01-01",
        max: "2020-01-01",
        start: "",
        end: "",
      },
      month: {
        min: "2018-01",
        max: "2020-01",
        start: "",
        end: "",
      },
      year: {
        min: "2018",
        max: "2020",
        start: "",
        end: "",
      },
      time: {
        min: "06:00:00",
        max: "22:00:00",
        start: "",
        end: "",
      },
      email: "",
      profile: "",
      color: "#FF00FF",
      birth: "",
      married: false,
      uni: 1,
      unis: [
        {
          value: 1,
          text: "宁夏大学",
        },
        {
          value: 2,
          text: "厦门大学",
        },
        {
          value: 3,
          text: "宁波大学",
        },
        {
          value: 4,
          text: "清华大学",
        },
        {
          value: 5,
          text: "北京大学",
        },
      ],
      sx: 2,
      sxs: [
        {
          value: 1,
          text: "康家沟小学",
        },
        {
          value: 2,
          text: "张家界小学",
        },
        {
          value: 3,
          text: "贵族小学",
        },
      ],
      num: [2, 7],
      nums: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
      pro: [1],
      pros: [
        {
          value: 1,
          text: "老师",
        },
        {
          value: 2,
          text: "学生",
        },
      ],
    });
    const onSubmit = (e: unknown) => {
      console.log("bingo ", e);
    };
    const onValidFailed = (e: unknown) => {
      console.log(e, "valid failed");
    };
    const onSalaryChange = (e: number[]) => {
      console.log(e);
      formdata.salary.start = e[0];
      formdata.salary.end = e[1];
    };
    const onDutyChange = (e: string[]) => {
      console.log(e);
      formdata.duty.start = e[0];
      formdata.duty.end = e[1];
    };
    const onAccountChange = (v: string) => {
      console.log(v);
    };
    const onColorChange = (v: string) => {
      formdata.color = v;
    };
    const onBirthChange = (v: string) => {
      formdata.birth = v;
    };
    const onProChange = (v: number[]) => {
      formdata.pro = v;
    };
    const onNumChange = (v: number[]) => {
      formdata.num = v;
    };
    const onUniChange = (v: number) => {
      console.log(v);
      formdata.uni = v;
    };
    const onSxChange = (v: number) => {
      console.log(v);
      formdata.sx = v;
    };
    const onGenderChange = (v: number) => {
      formdata.gender = v;
    };
    const onMarriageChange = (v: boolean) => {
      console.log(v);
      formdata.married = v;
    };

    const formStyle = ref<string | null>(null);
    const onShiftFormStyle = () => {
      formStyle.value = formStyle.value ? null : "plain";
    };
    return {
      ...toRefs(formdata),
      formStyle,
      onShiftFormStyle,
      onSubmit,
      onValidFailed,
      onAccountChange,
      onSalaryChange,
      onDutyChange,

      onColorChange,
      onBirthChange,
      onProChange,
      onNumChange,
      onUniChange,
      onSxChange,
      onGenderChange,
      onMarriageChange,
      ...Data,
    };
  },
});
</script>
